<template>
<div class="home-page-container">
  <!-- search 查询 -->
  <el-card shadow="never">
    <mer-search :searchConfig="formConfig" :searchBar="searchBar" @search="search" @reset="reset()" :loading="tableLoading" :isLayout="true">
      <template slot="selectChange">
        <el-select v-model="searchBar.gasId" label="选择油站">
          <el-option v-for="item in gasOptions" :label="item.gasName" :key="item.gasId" :value="item.gasId"></el-option>
        </el-select>
      </template>
      <template slot="handlerBefore">
        <el-button size="mini" type="danger" @click="add"><span style="color: #fff;">+</span> 新增商户优惠券</el-button>
      </template>
    </mer-search>
  </el-card>
  <!-- table 表格 -->
  <el-card shadow="never">
    <mer-table :loading="tableLoading" :layout="'total, sizes, prev, pager, next'" :tableConfig="tableConfig" :tableData="tableData" :pageSizes="[10]" :pagination="pagination" @SizeChange="handleSizeChange" @PageChange="pageChange" :hasIndex="true">
      <template slot="expireDateInterval" slot-scope="{row}">
        <span>自发放后{{row.expireDateInterval}}天内</span>
      </template>
      <template slot="handler" slot-scope="{row}">
        <div class="btn">
          <span  @click="showDetail(row)">查看</span>
          <span  v-if="[1].includes(row.couponStatus)" @click="useOrDeleteApi('2', row)">禁用</span>
          <span  v-else @click="useOrDeleteApi('1', row)">启用</span>
          <span  @click="useOrDeleteApi('3', row)">删除</span>
        </div>
      </template>
    </mer-table>
  </el-card>
</div>
</template>

<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { couponList, useOrDelete, getAllGasInfoList } from '@api/market'
// 查询表单配置
let formConfig = [
  { label: '选择油站', type: 'slot', slotName: 'selectChange' },
  { label: '优惠券名称', type: 'input', modelName: 'couponRuleName', placeholder: '优惠券名称', maxlength: 100 },
]
// 表格参数配置
let tableConfig = [
  { label: '券ID',prop: 'couponCode',width: 136 },
  { label: '优惠券名称', prop: 'couponTitle', width: 136 },
  { label: '优惠券面值（元）', prop: 'couponMoney', width: 136 },
  { label: '使用门槛', prop: 'couponSubTitle', width: 136 },
  { label: '券有效期', prop: 'expireDateInterval', width: 136, slot: 'expireDateInterval', },
  { label: '可用油品', prop: 'oils', width: 136 },
  { label: '可用油站', prop: 'gasName' },
  { label: '券状态', prop: 'couponStatusName', width: 136 },
  { label: '操作', slot: 'handler', fixed: 'right', width: 180 }
]
export default {
  mixins: [listPage, queryMix],
  data () {
    return {
      formConfig: formConfig,
      tableConfig: tableConfig,
      gasOptions: [], // 油站仓库
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage() {
      this.getAllQueryProps()
      this.initList(couponList, false)
    },
    getAllQueryProps() {
      // 获取查询条件：油站
      this.getAllGasStationsApi()
    },
    // 新增商户优惠券
    add() {
      this.$router.push({
        path: '/marketCenter/couponAdd'
      })
    },
    // 查看
    showDetail (row) {
      this.$router.push({ path: '/marketCenter/couponAdd', query: { mark: row.id }})
    },
    // 禁用启用，删除接口 1-启用，2-禁用，3-删除
    async useOrDeleteApi (operateType, { id, gasId, couponCode }) {
      const params = { operateType, couponRuleId: id, gasId, couponCode }
      try {
        switch (operateType) {
          case '1':
          {
            const res = await useOrDelete(params)
            if (res.code !== 200) return
            this.search()
            break
          }
          case '2':
            this.$confirm('确定禁用吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await useOrDelete(params)
              if (res.code !== 200) return
              this.search()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消禁用'
              })
            })
            break
          case '3':
            this.$confirm('确定删除吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              const res = await useOrDelete(params)
              if (res.code !== 200) return
              this.search()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
            break
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取加油站
    async getAllGasStationsApi () {
      try {
        const { code, result = [] } = await getAllGasInfoList()
        if(code !== 200) return
        this.gasOptions = result
      } catch(e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-page-container {
  margin-top: 20px;
}

.el-card {
  margin-top: 10px;
}
.btn{
  display: flex;
  justify-content: space-around;
  align-items: center;
  >span{
    font-size: 14px;
    color: #4B7EFE;
    cursor: pointer;
  }
}
</style>
